<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甜蜜时光甜品站 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .t-navbar {
            background: linear-gradient(to right, #ff9a9e, #fad0c4);
            color: white;
        }

        .banner {
            height: 180px;
            background: linear-gradient(to right, #ff9a9e, #fad0c4);
            position: relative;
            overflow: hidden;
        }

        .banner-image {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
        }

        .banner-text {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }

        .feature-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            background-color: white;
            transition: transform 0.3s ease;
        }

        .feature-card:active {
            transform: scale(0.98);
        }

        .feature-icon {
            font-size: 24px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-bottom: 8px;
        }

        .nav-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: white;
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
        }

        .nav-icon {
            font-size: 24px;
            margin-bottom: 4px;
        }

        .active {
            color: #ff9a9e;
        }
    </style>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="t-navbar p-4 flex justify-between items-center">
        <div class="text-lg font-bold">甜蜜时光</div>
        <div class="flex items-center">
            <i class="t-icon t-icon-search mr-4"></i>
            <i class="t-icon t-icon-notification"></i>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="pb-16"> <!-- 底部导航栏的高度 -->
        <!-- 轮播图 -->
        <div class="banner">
            <img src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
                class="banner-image" alt="甜品展示">
            <div class="banner-text">
                <h2 class="text-2xl font-bold">甜蜜时光甜品站</h2>
                <p class="text-sm opacity-80">每一口都是幸福的味道</p>
            </div>
        </div>

        <!-- 扫码点餐入口 -->
        <div class="p-4">
            <div class="feature-card p-4 flex items-center justify-between bg-gradient-to-r from-pink-100 to-pink-50">
                <div>
                    <h3 class="font-bold text-lg">堂食点餐</h3>
                    <p class="text-sm text-gray-600">无需登录，快速下单</p>
                </div>
                <div class="bg-pink-500 text-white p-2 rounded-full">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                        </path>
                    </svg>
                </div>
            </div>
        </div>

        <!-- 热门推荐 -->
        <div class="p-4">
            <h3 class="font-bold mb-3">热门推荐</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="feature-card">
                    <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt="提拉米苏" class="w-full h-32 object-cover">
                    <div class="p-2">
                        <h4 class="font-bold">经典提拉米苏</h4>
                        <p class="text-xs text-gray-500">浓郁咖啡，轻盈口感</p>
                        <div class="flex justify-between items-center mt-2">
                            <span class="text-pink-500 font-bold">¥42</span>
                            <button class="bg-pink-500 text-white text-xs p-1 rounded">加入购物车</button>
                        </div>
                    </div>
                </div>
                <div class="feature-card">
                    <img src="https://images.unsplash.com/photo-1551024709-8f23befc6f87?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt="芒果冰沙" class="w-full h-32 object-cover">
                    <div class="p-2">
                        <h4 class="font-bold">芒果冰沙</h4>
                        <p class="text-xs text-gray-500">新鲜芒果，清爽夏日</p>
                        <div class="flex justify-between items-center mt-2">
                            <span class="text-pink-500 font-bold">¥28</span>
                            <button class="bg-pink-500 text-white text-xs p-1 rounded">加入购物车</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新活动 -->
        <div class="p-4">
            <h3 class="font-bold mb-3">最新活动</h3>
            <div class="feature-card p-4 bg-gradient-to-r from-purple-100 to-purple-50">
                <h4 class="font-bold">夏日特惠</h4>
                <p class="text-sm text-gray-600 my-2">购买任意冰沙类饮品，第二杯半价</p>
                <span class="text-xs text-purple-500">活动时间：6月1日-8月31日</span>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="nav-bar">
        <div class="nav-item active text-pink-500">
            <svg class="w-6 h-6 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
                </path>
            </svg>
            <span>首页</span>
        </div>
        <div class="nav-item">
            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01">
                </path>
            </svg>
            <span>点餐</span>
        </div>
        <div class="nav-item">
            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z">
                </path>
            </svg>
            <span>购物车</span>
        </div>
        <div class="nav-item">
            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
            <span>我的</span>
        </div>
    </div>
</body>

</html>